<template>
  <h4>当前求和:{{sum}}</h4>
  <button @click="sum++">点我++</button>
  <hr>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
  // import {h} from 'vue'
  import { ref, reactive, toRefs,readonly,shallowReadonly } from 'vue' 
  export default {
    name: 'Demo',
    setup() {
      //数据
      let sum  = ref(0)
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })
      // readonly:让一个响应式数据变成只读(深只读)
      // shallowReactive:让一个响应式数据变成只读(浅只读)
      // 引用场景：不希望数据呗修改时
      // person = readonly(person)
      person = shallowReadonly(person)
      sum = readonly(sum)
      return {
        sum,
        ...toRefs(person)
      }
    },
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
